import React, { useState, useEffect } from 'react';
// 从api服务导入获取商品的方法
import { fetchProducts } from '../services/api';

import ProductCard from '../components/ProductCard';
import LoadingSkeleton from '../components/LoadingSkeleton';

const Home = () => {
  //2. 组件状态定义
  const [products, setProducts] = useState([]);// 存储商品列表
  const [loading, setLoading] = useState(true); // 控制加载状态
  const [searchTerm, setSearchTerm] = useState('');// 存储搜索关键词
  //3. 数据获取（副作用）
  useEffect(() => {
    const loadProducts = async () => {
      try {
        setLoading(true);
        const data = await fetchProducts();// 调用API获取商品数据
        setProducts(data);// 更新商品列表状态
      } catch (error) {
        console.error('加载商品失败:', error);
      } finally {
        setLoading(false); // 无论成功失败，都结束加载状态
      }
    };
    
    loadProducts();
  }, []);

  //4. 商品搜索过滤
  //// 根据搜索关键词过滤商品，匹配商品名称或描述（不区分大小写）
  const filteredProducts = products.filter(product => 
    product.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
    product.description.toLowerCase().includes(searchTerm.toLowerCase())
  );

  // 5. 渲染逻辑
  return (
    <div>
        {/* //a. 页面标题 */}
      <h1 className="page-title">光合优选商城</h1>
      {/* b. 搜索框 */}
      <div style={{ padding: '0 15px', marginBottom: '20px' }}>
        <input
          type="text"
          placeholder="搜索商品..."
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
          style={{
            width: '100%',
            padding: '10px 15px',
            border: '1px solid #ddd',
            borderRadius: '4px',
            fontSize: '16px'
          }}
        />
      </div>
      {/* c. 内容区域（条件渲染） */}
      {loading ? (
        // 骨架屏加载状态
        <div>
          {[...Array(5)].map((_, i) => <LoadingSkeleton key={i} />)}
        </div>
      ) : (
          // 数据加载完成状态
        <div>
          {filteredProducts.length > 0 ? (
            //  有匹配商品：渲染商品列表
            filteredProducts.map(product => (
              <ProductCard key={product.id} product={product} />
            ))
          ) : (
            //  没有匹配商品：渲染提示信息
            <div style={{ textAlign: 'center', padding: '40px 20px' }}>
              <p style={{ fontSize: '18px', color: '#666' }}>没有找到匹配的商品</p>
            </div>
          )}
        </div>
      )}
    </div>
  );
};

export default Home;